<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>变电运检专业</title>

    <!-- Google Font: Source Sans Pro -->
    <!--  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">-->
    <!-- Font Awesome -->
    <link rel="stylesheet" href={{ url_for(
    'static', filename='plugins/fontawesome-free/css/all.min.css') }}>
    <!-- Theme style -->
    <link rel="stylesheet" href={{ url_for(
    'static', filename='adminlte/css/adminlte.min.css') }}>
    <!-- overlayScrollbars -->
    <link rel="stylesheet" href={{ url_for(
    'static', filename='plugins/overlayScrollbars/css/OverlayScrollbars.min.css') }}>

</head>
<body class="hold-transition sidebar-mini layout-fixed layout-top-nav">
<div class="wrapper">

    <!-- Navbar -->
    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" onclick="window.location.href = '/index'">首页</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" data-widget="fullscreen" href="#" role="button">
                    <i class="fas fa-expand-arrows-alt"></i>
                </a>
            </li>
        </ul>
    </nav>
    <!-- /.navbar -->

    <!-- Content Wrapper. Contains page content -->
<!--        <div class="content-wrapper iframe-mode" data-widget="iframe" data-loading-screen="750">-->
        <!--        <div class="nav navbar navbar-expand navbar-white navbar-light p-0">-->
        <!--        </div>-->
    <div class="content-wrapper">
        <div class="tab-content">
            <div class="tab">
                <div class="title" style="padding:20px;">
                    <h2 class="display-4 text-center">变电运检专业</h2>
                    <h2 class="display-5 text-center">请确认文件后点击计算按钮进入下一步</h2>
                </div>

                <div class="card card-primary" style="margin:20px;">
                    <div class="card-header">
                        <h3 class="card-title">文件列表</h3>
                    </div>
                    <!-- /.card-header -->
                    <!-- form start -->
                    <form id="form" action="/finish" method="post">
                        <div class="card-body">
                            <div class="form-group">
                                <label id="label0" for="select0">&ensp;文件0</label>
                                <div class="row">
                                    &ensp;
                                    <button id="btn-refresh0" type="button" class="btn btn-outline-primary btn-sm col-md-2">
                                        <i class="fa fa-circle-notch"></i>刷新
                                    </button>
                                    &ensp;&ensp;
                                    <button id="btn-open-dir0" type="button" class="btn btn-outline-primary btn-sm col-md-2">
                                        <i class="fa fa-folder-open"></i>打开文件夹
                                    </button>
                                </div>
                                <select id="select0" class="custom-select form-control-border">
                                </select>
                            </div>
                            <div class="form-group">
                                <label id="label1" for="select1">&ensp;文件1</label>
                                <div class="row">
                                    &ensp;
                                    <button id="btn-refresh1" type="button" class="btn btn-outline-primary btn-sm col-md-2">
                                        <i class="fa fa-circle-notch"></i>刷新
                                    </button>
                                    &ensp;&ensp;
                                    <button id="btn-open-dir1" type="button" class="btn btn-outline-primary btn-sm col-md-2">
                                        <i class="fa fa-folder-open"></i>打开文件夹
                                    </button>
                                </div>
                                <select id="select1" class="custom-select form-control-border">
                                </select>
                            </div>
                            <div class="form-group">
                                <label id="label2" for="select2">&ensp;文件2</label>
                                <div class="row">
                                    &ensp;
                                    <button id="btn-refresh2" type="button" class="btn btn-outline-primary btn-sm col-md-2">
                                        <i class="fa fa-circle-notch"></i>刷新
                                    </button>
                                    &ensp;&ensp;
                                    <button id="btn-open-dir2" type="button" class="btn btn-outline-primary btn-sm col-md-2">
                                        <i class="fa fa-folder-open"></i>打开文件夹
                                    </button>
                                </div>
                                <select id="select2" class="custom-select form-control-border">
                                </select>
                            </div>
                        </div>
                        <!-- /.card-body -->

                        <div class="card-footer">
                            <button id="btn-submit" class="btn btn-primary">计算</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        </div>
    <!-- /.content-wrapper -->
    <footer class="main-footer" >
        <strong>Copyright &copy; 2022 <a href="">Test</a>.</strong>
        All rights reserved.
        <div class="float-right d-none d-sm-inline-block">
            <b>Version</b> 1.0.0
        </div>
    </footer>

    <!-- Control Sidebar -->
<!--    <aside class="control-sidebar control-sidebar-dark">-->
<!--        &lt;!&ndash; Control sidebar content goes here &ndash;&gt;-->
<!--    </aside>-->
    <!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->

<!-- jQuery -->
<script src={{ url_for(
'static', filename='plugins/jquery/jquery.min.js') }}></script>
<!-- jQuery UI 1.11.4 -->
<script src={{ url_for(
'static', filename='plugins/jquery-ui/jquery-ui.min.js') }}></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
    $.widget.bridge('uibutton', $.ui.button);
    function refreshSelect(path,selectId) {
        $.get('/check-file?path='+path, function (res) {
            let resJson = JSON.parse(res);
            if (resJson.success === true) {
                let resData = resJson.data;
                $(selectId).empty();
                for (let index in resData) {
                    $(selectId).append($('<option>').val(resData[index].path).text(resData[index].path));
                }
            }
        })
    }
    // init
    const FORM_GROUP_LIST = [{name:"1",path:'/变电运检专业/1'},
        {name:"2",path:'/变电运检专业/2'},
        {name:"3",path:'/变电运检专业/3'}]

    for (let index in FORM_GROUP_LIST) {
        let name = FORM_GROUP_LIST[index].name;
        let path = FORM_GROUP_LIST[index].path;
        $('#label'+ index).html("&ensp;文件"+name);
        refreshSelect(path,"#select"+index);
        $('#select'+ index).attr("name",name)
        $('#btn-refresh'+ index).click(function() {
            refreshSelect(path,"#select"+index);
        });
        $('#btn-open-dir'+ index).click(function() {
            $.get('/open-dir/input?path='+path);
        });
    }

    $('#btn-submit').click(function() {
        $('#form').submit();
        // let filePathList = [];
        // for (let item in FORM_GROUP_LIST) {
        //     filePathList.push($('#select'+ item).val());
        // }
        // req_data = {success:true,data: filePathList};
        // a = JSON.stringify(req_data);
        // $.ajax({
        //     type: "POST",
        //     url: "/finish",
        //     data: a,
        //     success: function(){},
        //     dataType: "json",
        //     contentType : "application/json"
        // });
    });
    $('#form').on("submit", function(event,data){
        let filePathList = [];
        alert(data);
        return true;
    });
</script>
<!-- Bootstrap 4 -->
<script src={{ url_for(
'static', filename='plugins/bootstrap/js/bootstrap.bundle.min.js') }}></script>
<!-- overlayScrollbars -->
<script src={{ url_for(
'static', filename='plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js') }}></script>
<!-- AdminLTE App -->
<script src={{ url_for(
'static', filename='adminlte/js/adminlte.js') }}></script>
<!-- AdminLTE for demo purposes -->
<!--<script src="dist/js/demo.js"></script>-->
</body>
</html>
